<script>
import { useVModel } from '@vueuse/core'
import { provide } from 'vue'
export default {
  name: 'XtxTables',
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    }
  },
  setup (props, { emit }) {
    // 接收v-model的值
    const activeName = useVModel(props, 'modelValue', emit)
    // 点击选项卡
    const tabClick = (name, index) => {
      activeName.value = name
      emit('tab-click', { name, index })
    }
    // 给每一个pannel传当前的激活
    provide('activeName', activeName)
    return { activeName, tabClick }
  },
  render () {
    // // 返回的内容会进行渲染
    // // 1.在babel的帮助下，可以在vue中写jsx语法
    // // 2.数据的使用
    // const name = 'tom'
    // const title = 'tome 12'
    // // 3.时间如何绑定
    // const say = () => {
    //   console.log('hi jsx')
    // }
    // // 4,顶一个jsx对象
    // const sub = [<sub>123</sub>, <sub>456</sub>]
    // return <h1 onClick={say} title={title}>{name} {sub}</h1>
    // 需要在这里进行组织
    // 1.tabls组件大容器
    // 2.选项卡标签结构
    // 3.每个选项卡对应的内容
    // 获取插槽
    const pannels = this.$slots.default()
    // 动态的panels组件集合
    // console.log(pannels)
    const dynamicPannel = []
    pannels.forEach(item => {
      if (item.type.name === 'XtxTablesPannel') {
        // 静态
        dynamicPannel.push(item)
      } else {
        item.children.forEach(item => {
          dynamicPannel.push(item)
        })
      }
    })

    const nav = <nav>
      {dynamicPannel.map((item, i) => {
        // console.log(item)

        return <a onClick={() => this.tabClick(item.props.name, i)} class={{ active: item.props.name === this.activeName }} href="javascript:;">{item.props.label}</a>
      })}
    </nav>

    return <div class="xtx-tables">{[nav, dynamicPannel]}</div>
  }
}
</script>

<style scoped lang="less">
.xtx-tables {
  background: #fff;
  > nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>
